<template>
  <div class="functions-dict">
    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为FRUITS，值为1的水果名称?</div>
      <div class="answer" v-if="answer1">{{answer1}}</div>
      <van-button type="primary" v-if="!answer1" @click="getLabelByCode">点击获取答案</van-button>
    </div>
    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为FRUITS，名称为草莓的水果值?</div>
      <div class="answer" v-if="answer2">{{answer2}}</div>
      <van-button type="primary" v-if="!answer2" @click="getCodeByLabel">点击获取答案</van-button>
    </div>
    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为FRUITS，值为1,2,3,4的水果名称分别是什么?</div>
      <div class="answer" v-if="answer3">{{answer3}}</div>
      <van-button type="primary" v-if="!answer3" @click="getLabelByCodes">点击获取答案</van-button>
    </div>
    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为FRUITS，名称为草莓,芒果,西瓜的水果值分别是什么?</div>
      <div class="answer" v-if="answer4">{{answer4}}</div>
      <van-button type="primary" v-if="!answer4" @click="getCodeByLabels">点击获取答案</van-button>
    </div>
    <div class="questions-box flex-c-b flex-col">
      <div class="question">想看字典类型为FRUITS的数据值?</div>
      <div class="answer" v-if="answer5.length > 0">
        <div class="flex-c-b" v-for="item in answer5" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
      </div>
      <van-button type="primary" v-if="answer5.length === 0" @click="getDictObjByDictTypes1">点击查看</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">想看字典类型为SPORTS,PERSON_TYPE的数据值?</div>
      <div class="answer" v-if="answer6.PERSON_TYPE.length > 0">
        SPORTS
        <div class="flex-c-b" v-for="item in answer6.SPORTS" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
        PERSON_TYPE
        <div class="flex-c-b" v-for="item in answer6.PERSON_TYPE" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
      </div>
      <van-button type="primary"  v-if="answer6.PERSON_TYPE.length === 0" @click="getDictObjByDictTypes2">点击查看</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city，漳州市的值为啥?</div>
      <div class="answer" v-if="answer7">{{answer7}}</div>
      <van-button type="primary" v-if="!answer7" @click="getTreeCodeByLabel">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city，35062401是哪个地方?</div>
      <div class="answer" v-if="answer8">{{answer8}}</div>
      <van-button type="primary" v-if="!answer8" @click="getTreeLabelByCode">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city，35062401,35062402 是哪个地方?</div>
      <div class="answer" v-if="answer9">{{answer9}}</div>
      <van-button type="primary" v-if="!answer9" @click="getTreeLabelByCodes">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city，太平镇,金星乡的值为啥?</div>
      <div class="answer" v-if="answer10">{{answer10}}</div>
      <van-button type="primary" v-if="!answer10" @click="getTreeCodeByLabels">点击获取答案</van-button>
    </div>

    <van-button type="primary" @click="reset">重置</van-button>
  </div>
</template>

<script>
import {getLabelByCode, getCodeByLabels, getCodeByLabel, getLabelByCodes, getDictObjByDictTypes, getTreeCodeByLabel, getTreeLabelByCode, getTreeLabelByCodes, getTreeCodeByLabels} from "vue2-vant-dict"
export default {
  name: "functions-dict",
  data() {
    return {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      answer5: [],
      answer6: {
        SPORTS: [],
        PERSON_TYPE: []
      },
      answer7: "",
      answer8: "",
      answer9: "",
      answer10: ""
    }
  },
  methods: {
    reset() {
      this.answer1 = this.answer2 = this.answer3 = this.answer4 = this.answer7 = this.answer8 = this.answer9 = this.answer10 = "" 
      this.answer6 = {
        SPORTS: [],
        PERSON_TYPE: []
      }
      this.answer5 = []
    },
    //通过值获取中文值
    getLabelByCode() {
      getLabelByCode("1", "FRUITS").then(data => {
        this.answer1 = data
      })
    },
    //通过中文值获取值
    getCodeByLabel() {
      getCodeByLabel("草莓", "FRUITS").then(data => {
        this.answer2 = data
      })
    },
    //通过多个值获取多个中文值
    getLabelByCodes() {
      getLabelByCodes("1,2,23131233,4", "FRUITS", "~~").then(data => {
        this.answer3 = data
      })
    },
    //通过多个中文值获取多个值
    getCodeByLabels() {
      getCodeByLabels("草莓,芒果das的萨达,西瓜", "FRUITS", "~~").then(data => {
        this.answer4 = data
      })
    },
    getDictObjByDictTypes1() {
      getDictObjByDictTypes("FRUITS").then(data => {
        this.answer5 = data["FRUITS"]
      })
    },
    getDictObjByDictTypes2() {
      getDictObjByDictTypes("SPORTS,PERSON_TYPE").then(data => {
        this.answer6 = data
      })
    },
    getTreeCodeByLabel() {
      getTreeCodeByLabel("漳州市", "city").then(data => {
        this.answer7 = data
      })
    },
    getTreeLabelByCode() {
      getTreeLabelByCode("35062401", "city").then(data => {
        this.answer8 = data
      })
    },
    getTreeLabelByCodes() {
      getTreeLabelByCodes("35062401,35062402", "city").then(data => {
        this.answer9 = data
      })
    },
    getTreeCodeByLabels() {
      getTreeCodeByLabels("太平镇,金星乡", "city").then(data => {
        this.answer10 = data
      })
    }
  }
}
</script>

<style scoped>
.questions-box{
  margin-bottom: 20px;
}
</style>